<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <img id="light" src="img/off.gif" /> <br />
    <div class="cls">传智教育</div>
    <br />
    <div class="cls">黑马程序员</div>
    <br />
    <input type="checkbox" name="hobby" /> 电影
    <input type="checkbox" name="hobby" /> 旅游
    <input type="checkbox" name="hobby" /> 游戏
    <br />
  </body>

  <script>
    /*
        1 根据id属性值获取，返回单个Element对象
        var 变量名 = document.getElementById('id的属性值');
      
        2 根据标签名称获取，返回Element对象数组
        var 变量名 = document.getElementsByTagName('标签名');

        3 根据name属性值获取，返回Element对象数组
        var 变量名 = document.getElementsByName('name属性值');

        4 根据class属性值获取，返回Element对象数组
        var 变量名 = document.getElementsByClassName('class属性值');
     */

    // 1. 根据ID属性值获取
    var imgObj = document.getElementById("light");
    imgObj.src = "./img/on.gif";

    // 2. 根据class属性值获取
    var divArr = document.getElementsByClassName("cls");
    console.log(divArr.length);

    // 3. 根据name属性值获取
    var inputArr = document.getElementsByName("hobby");
    console.log(inputArr.length);

    // 4. 根据标签名获取
    var arr = document.getElementsByTagName("input");
    for (var i = 0; i < arr.length; i++) {
      var ele = arr[i];
      console.log(ele);
    }
  </script>
</html>
